<template>
  <div>
    <div class="faultBox">
      <div class="leftContent baseBox">
        <div class="leftContentTop">
          <title-text>
            <span slot="title">今日所有故障总数</span>
          </title-text>
          <div class="tableBox">
            <el-table
              :row-style="rowStyle"
              :header-cell-style="headStyle"
              :cell-style="cellStyle"
              :data="tableData"
              :size="small"
              :fit="fit"
              :highlight-current-row=true
            >
              <el-table-column
                prop="eName"
                label="仪器名称"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="total"
                label="故障总数"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="l1"
                label="一级故障"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="l2"
                label="二级故障"
                min-width="80"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="l3"
                label="三级故障"
                min-width="80"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="leftContentBottom">
          <title-text>
            <span slot="title">近一周故障等级统计</span>
          </title-text>
          <div
            id="barChartWeek"
            class="barChartBox"
          >
          </div>

        </div>
      </div>
      <div class="centerContent baseBox">
        <title-text>
          <span slot="title">故障统计日历饼图</span>
        </title-text>
        <div
          id="dateBox"
          class="dateBox"
        ></div>
        <title-text>
          <span slot="title">月内停机故障图</span>
        </title-text>
        <div
          id="barBoxTop5"
          class="barBoxTop5"
        ></div>
        <div
          id="lineMonthBox"
          class="lineMonthBox"
        ></div>
      </div>
      <div class="rightContent baseBox">
        <div class="rightContentTop">
          <title-text>
            <span slot="title">本周大区停机故障</span>
          </title-text>
          <div
            id="barAreaBox"
            class="barAreaBox"
          ></div>
          <!-- 下面是饼图 -->
          <div
            id="pieAreaBox"
            class="pieAreaBox"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titleText from "@/components/title.vue";
import * as echarts from "echarts";
import { todayFaultTotal } from "@/request/api.js";
import { faultCalendarPie } from "@/request/api.js";
import { weekHaltFault } from "@/request/api.js";
import { weekHaltFaultPie } from "@/request/api.js";
import { mothHaltFault } from "@/request/api.js";
import { mothHaltFaultLine } from "@/request/api.js";
import { weekFaultClassBar } from "@/request/api.js";
import { weekHaltFaultBar } from "@/request/api.js";

// import tellgenChart from "@/assets/tellgenChart.js";
import "@/assets/base/echartsBaseStyle.css";
import { color } from "echarts";
export default {
  created() {
    this.todayFaultTotal();
    this.faultCalendarPie();
    this.weekHaltFault();
    this.weekHaltFaultPie();
    this.mothHaltFault();
    this.mothHaltFaultLine();
    this.weekFaultClassBar();
    this.weekHaltFaultBar();
  },
  mounted() {
    // this.showPie1();
    // this.showPie2();
    // this.showPie3();
    // this.showbarChart();
    // this.showDateChart();
    // this.showBarTop5();
    // this.showLineMonth();
    // this.showBarArea();
    // this.showPieArea();
    // this.showBarGroup();
  },
  data() {
    return {
      headStyle: {
        height: "5rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        fontSize: "1.4rem",
      },
      cellStyle: {
        height: "5rem",
        fontSize: "1.4rem",
      },
      small: "small",
      fit: true,
      tableData: [],
      calendarPieData: [],
      calendarPieTime: [],
      haltFaultData: [],
      haltFaultAreaData: [],
      HaltFaultPie: [],
      monthHaltFault: [],

      faultFullData: [],
      faultType: [],
      dataScope: "",

      haltFaultTime: [],
      haltFaultDatas: [],
      haltFaultType: [],
    };
  },
  components: {
    titleText,
  },
  methods: {
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    },
    //今日所有故障总数接口
    todayFaultTotal() {
      todayFaultTotal()
        .then((res) => {
          console.log("今日所有故障总数接口成功", res);
          if (res.data.success) {
            this.tableData = res.data.rows;
          }
        })
        .catch((err) => {
          console.log("今日所有故障总数接口成功", err);
        });
    },
    //故障统计日历饼图接口
    faultCalendarPie() {
      faultCalendarPie()
        .then((res) => {
          console.log("故障日历饼图请求成功", res);
          this.calendarPieData = res.data.Datas; //日历饼图数据
          this.dataScope = res.data.Datas[0].Date.substring(0, 7);
          for (var i = 0; i < res.data.Datas.length; i++) {
            this.calendarPieTime.push(res.data.Datas[i].Date); //日历饼图时间
          }
          this.showDateChart();
        })
        .catch((err) => {
          console.log("故障日历饼图请求失败", err);
        });
    },
    //本周大区停机故障柱状图接口
    weekHaltFault() {
      weekHaltFault()
        .then((res) => {
          console.log("本周大区停机故障接口成功", res);
          this.haltFaultData = res.data.Total;
          this.haltFaultAreaData = res.data.Type;
          this.showBarArea();
        })
        .catch((err) => {
          console.log("本周大区停机故障接口失败", err);
        });
    },
    //本周大区停机故障饼图接口
    weekHaltFaultPie() {
      weekHaltFaultPie({
        aName: "华东",
      })
        .then((res) => {
          console.log("停机故障饼图接口成功", res);
          this.HaltFaultPie = res.data;
          this.showPieArea();
        })
        .catch((err) => {
          console.log("停机故障饼图接口失败", err);
        });
    },
    //月内停机故障柱状图
    mothHaltFault() {
      mothHaltFault()
        .then((res) => {
          console.log("月内停机故障请求成功", res);
          if (res.data.success) {
            this.monthHaltFault = res.data.rows;
          }
          this.showBarTop5();
        })
        .catch((err) => {
          console.log("月内停机故障请求失败", err);
        });
    },
    //月内故障折线图
    mothHaltFaultLine() {
      mothHaltFaultLine()
        .then((res) => {
          console.log("月内停机故障折线图成功", res);
          
          var haltTemp = res.data.rows;
              var hF3999 = [];
              var hF4000 = [];
              var hS6500 = [];
              var hi100 = [];
              for (var i = 0; i < haltTemp.length; i++) {
                if (this.haltFaultTime.indexOf(haltTemp[i].date) == -1) {
                  this.haltFaultTime.push(haltTemp[i].date);
                }
                if (this.haltFaultType.indexOf(haltTemp[i].type) == -1) {
                  this.haltFaultType.push(haltTemp[i].type);
                  var tempObject = {};
                  tempObject.types = haltTemp[i].type;
                  this.haltFaultDatas.push(tempObject);
                }
                switch (haltTemp[i].type) {
                  case "F3999":
                    hF3999.push(haltTemp[i].total);
                    break;
                  case "F4000":
                    hF4000.push(haltTemp[i].total);
                    break;
                  case "S6500":
                    hS6500.push(haltTemp[i].total);
                    break;
                  case "i100":
                    hi100.push(haltTemp[i].total);
                    break;
                }
              }
              for (var i = 0; i < this.haltFaultDatas.length; i++) {
                switch (this.haltFaultDatas[i].types) {
                  case "F3999":
                    this.haltFaultDatas[i].datas = hF3999;
                    break;
                  case "F4000":
                    this.haltFaultDatas[i].datas = hF4000;
                    break;
                  case "S6500":
                    this.haltFaultDatas[i].datas = hS6500;
                    break;
                  case "i100":
                    this.haltFaultDatas[i].datas = hi100;
                    break;
                }
              }
              console.log(this.haltFaultDatas);
              console.log(this.haltFaultTime);
              console.log(this.haltFaultType);
          
          this.showLineMonth();
        })
        .catch((err) => {
          console.log("月内停机故障折线图失败", err);
        });
    },
    //近一周故障等级统计
    weekFaultClassBar() {
      weekFaultClassBar()
        .then((res) => {
          console.log("近一周故障等级统计成功", res);

          this.faultFullData = res.data;
          var tempTypeData = ["product"];
          for (var i = 0; i < res.data[0].Info.length; i++) {
            tempTypeData.push(res.data[0].Info[i].Type);
          }
          this.faultType = tempTypeData;
          console.log("滴滴滴", this.faultType);
          this.showbarChart();
        })
        .catch((err) => {
          console.log("近一周故障等级统计失败", err);
        });
    },
    //近一周停机故障统计
    weekHaltFaultBar() {
      weekHaltFaultBar()
        .then((res) => {
          console.log("近一周停机故障统计成功", res);
        })
        .catch((err) => {
          console.log("近一周停机故障统计失败", err);
        });
    },

    showbarChart() {
      console.log("进入了", this.faultType);
      var barChartWeek = document.getElementById("barChartWeek");
      var myBarChart = this.$echarts.init(barChartWeek, "tellgenChart");
      var tempData = [];

      // for (var i = 0; i < this.faultFullData.length; i++) {
      //   for (var j = 0; j < this.faultFullData[i].Info.length; j++) {
      //     switch(this.faultFullData[i].Info[j].Total) {
      //       case "一级故障":;break;
      //     }
      //     tempData.push({
      //       product: this.faultFullData[i].Day,
      //      "一级故障":this.faultFullData[i].Info[j].Total,

      //     });
      //   }
      // }

      var option;
      option = {
        legend: {
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        tooltip: {
          textStyle: {
            fontSize: "1rem",
          },
        },
        grid: {
          right: 20,
          bottom: 50,
        },
        dataset: {
          dimensions: this.faultType, //1
          source: [
            //2
            {
              product: this.faultFullData[0].Day,
              三级故障: this.faultFullData[0].Info[2].Total,
              二级故障: this.faultFullData[0].Info[0].Total,
              一级故障: this.faultFullData[0].Info[1].Total,
            },
            {
              product: this.faultFullData[1].Day,
              三级故障: this.faultFullData[1].Info[2].Total,
              二级故障: this.faultFullData[1].Info[0].Total,
              一级故障: this.faultFullData[1].Info[1].Total,
            },
          ],
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            showBackground: true,
            backgroundStyle: { color: "rgba(16,15,31,1)" },
            label: {
              show: true,
              fontSize: ".8rem",
              position: "top",
            },
          },
          {
            type: "bar",
            showBackground: true,
            backgroundStyle: { color: "rgba(16,15,31,1)" },
            label: {
              show: true,
              fontSize: ".8rem",
              position: "top",
            },
          },
          {
            type: "bar",
            showBackground: true,
            backgroundStyle: { color: "rgba(16,15,31,1)" },
            label: {
              show: true,
              fontSize: ".8rem",
              position: "top",
            },
          },
          // {
          //   type: "bar",
          //   showBackground: true,
          //   backgroundStyle: { color: "rgba(16,15,31,1)" },
          //   label: {
          //     show: true,
          //     fontSize: ".8rem",
          //     position: "top",
          //   },
          // },
        ],
      };

      option && myBarChart.setOption(option);
      window.onresize = myBarChart.resize;
    },
    showDateChart() {
      var app = {};

      var chartDom = document.getElementById("dateBox");
      var myChart = echarts.init(chartDom, "tellgenChart");
      var option;
      var scatterData = this.calendarPieTime; //时间数组

      var incomclass = []; //2总数据
      for (var s = 0; s < this.calendarPieData.length; s++) {
        incomclass.push([
          { name: "一级故障", value: this.calendarPieData[s].L1 },
          { name: "二级故障", value: this.calendarPieData[s].L2 },
          { name: "三级故障", value: this.calendarPieData[s].L3 },
        ]);
      }

      function getPieSeries(scatterData, chart) {
        //[[2012-2-13,235],[2012-2-13,235],[2012-2-13,235],]
        return scatterData.map(function (item, index) {
          // item是scatterData数组的每一项['2017-02-3', 7657]，index是每项的索引值
          var center = chart.convertToPixel("calendar", item); //item ==['2017-02-3', 7657],将日期和值转换成像素坐标 center = [237.9085714285714, 158]
          console.log("center是", center);
          var pieData = incomclass[index];
          // [237.9085714285714, 158]
          return {
            id: index + "pie", //index是数组中所有项的索引
            type: "pie",
            center: center, //center是数组中的所有项
            label: {
              normal: {
                formatter: "{c}",
                position: "inside",
              },
            },
            radius: "14%",
            data: pieData,
          };
        });
      }

      function getPieSeriesUpdate(scatterData, chart) {
        return scatterData.map(function (item, index) {
          var center = chart.convertToPixel("calendar", item);
          return {
            id: index + "pie",
            center: center,
          };
        });
      }

      option = {
        title: {},
        tooltip: {
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          data: ["一级故障", "二级故障", "三级故障"], //3
          bottom: 20,
          textStyle: {
            color: "#EEEEEE",
            fontSize: "0.9rem",
          },
        },
        calendar: {
          // top: "center",
          left: "3%",
          right: "3%",
          width: "auto",
          height: "auto",
          orient: "vertical",
          itemStyle: {
            color: "#191931",
          },

          yearLabel: {
            show: false,
          },
          monthLabel: {
            show: false,
          },
          dayLabel: {
            show: true,
            margin: 20,
            firstDay: 2,
            color: "#eeeeee",
            fontSize: "1.4rem",
            nameMap: [
              //4
              "星期日",
              "星期一",
              "星期二",
              "星期三",
              "星期四",
              "星期五",
              "星期六",
            ],
          },
          range: this.dataScope, //5
        },
        series: [
          {
            id: "label",
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 1,
            left: "20%",
            label: {
              show: true,
              color: "#eeeeee",
              fontSize: "0",
              formatter: function (params) {
                return echarts.format.formatTime("dd", params.value[0]);
              },
              offset: ["2rem", "2rem"],
            },
            data: scatterData,
          },
        ],
      };

      var pieInitialized;
      setTimeout(function () {
        pieInitialized = true;
        myChart.setOption({
          series: getPieSeries(scatterData, myChart), //myChart是echarts的初始化，scatterData是["2012-03-16",654]
        });
      }, 10);

      app.onresize = function () {
        if (pieInitialized) {
          myChart.setOption({
            series: getPieSeriesUpdate(scatterData, myChart),
          });
        }
      };
      option && myChart.setOption(option);
      window.onresize = myChart.resize;
    },
    showBarTop5() {
      var chartDom = document.getElementById("barBoxTop5");
      var myChart = echarts.init(chartDom, "tellgenChart");
      var tempData = [["amount", "product"]];
      for (var i = 0; i < this.monthHaltFault.length; i++) {
        tempData.push([
          this.monthHaltFault[i].total,
          this.monthHaltFault[i].type,
        ]);
      }
      var option;

      option = {
        dataset: {
          source: tempData,
        },
        grid: {
          containLabel: true,
          left: "4%",
          right: "7%",
          bottom: "4%",
          top: "6%",
        },
        xAxis: {
          name: "amount",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        // visualMap: {
        //   orient: "horizontal",
        //   left: "center",
        //   min: 10,
        //   max: 100,
        //   text: ["High Score", "Low Score"],
        //   // Map the score column to color
        //   dimension: 0,
        //   inRange: {
        //     color: ["#3db1ff"]
        //   }
        // },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              // x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 月内停机故障折线图
    showLineMonth() {
      var lineMonthBox = document.getElementById("lineMonthBox");
      var myLineMonth = this.$echarts.init(lineMonthBox, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.haltFaultDatas.length; i++) {
        tempData.push({
          name: this.haltFaultDatas[i].types,
          type: "line",
          stack: "总量",
          data: this.haltFaultDatas[i].datas,
        });
      }
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          data: this.haltFaultType, //1
          textStyle: {
            color: "#EEEEEE",
            fontSize: ".9rem",
          },
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "8%",
          top: "16%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.haltFaultTime, //2
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        series: tempData,
      };
      option && myLineMonth.setOption(option);
      window.onresize = myLineMonth.resize;
    },
    showBarArea() {
      var chartDom = document.getElementById("barAreaBox");
      var myChart = echarts.init(chartDom, "tellgenChart");
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          textStyle: {
            fontSize: "1.2rem",
            color: "#eee",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#eeeeee",
            fontSize: "1.2rem",
          },
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320],
          },
          {
            name: "Mail Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Affiliate Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ad",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410],
          },
          {
            name: "Search Engine",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    showPieArea() {
      var pieAreaBox = document.getElementById("pieAreaBox");
      var myPieArea = this.$echarts.init(pieAreaBox, "tellgenChart");
      var tempData = [];
      for (var i = 0; i < this.HaltFaultPie.length; i++) {
        tempData.push({
          value: this.HaltFaultPie[i].total,
          name: this.HaltFaultPie[i].City,
          label: {
            fontSize: "1.2rem",
          },
        });
      }
      var option;
      option = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: "1rem",
          },
        },
        legend: {
          orient: "vertical",
          left: 50,
          top: "middle",
          textStyle: {
            color: "#eee",
            fontSize: "1.2rem",
          },
        },
        series: [
          {
            name: "仪器类型",
            type: "pie",
            radius: "65%",
            left: 140,
            data: tempData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myPieArea.setOption(option);
      window.onresize = myPieArea.resize;
    },
    // showBarGroup() {
    //   var barGroupBox = document.getElementById("barGroupBox");
    //   var myBarGroup = this.$echarts.init(barGroupBox, "tellgenChart");
    //   var option;
    //   option = {
    //     legend: {
    //       textStyle: {
    //         color: "#EEEEEE",
    //         fontSize: ".9rem",
    //       },
    //     },
    //     tooltip: {
    //       textStyle: {
    //         fontSize: "1rem",
    //       },
    //     },
    //     grid: {
    //       right: 20,
    //       bottom: 30,
    //     },
    //     dataset: {
    //       dimensions: ["product", "F3999", "F4000", "I100", "S6500"],
    //       source: [
    //         {
    //           product: "周一",
    //           F3999: 1,
    //           F4000: 2,
    //           I100: 1,
    //           S6500: 3,
    //         },
    //         {
    //           product: "周二",
    //           F3999: 2,
    //           F4000: 1,
    //           I100: 2,
    //           S6500: 3,
    //         },
    //         {
    //           product: "周三",
    //           F3999: 2,
    //           F4000: 3,
    //           I100: 1,
    //           S6500: 3,
    //         },
    //         {
    //           product: "周四",
    //           F3999: 1,
    //           F4000: 0,
    //           I100: 3,
    //           S6500: 2,
    //         },
    //         {
    //           product: "周五",
    //           F3999: 2,
    //           F4000: 1,
    //           I100: 3,
    //           S6500: 1,
    //         },
    //         {
    //           product: "周六",
    //           F3999: 3,
    //           F4000: 0,
    //           I100: 2,
    //           S6500: 1,
    //         },
    //         {
    //           product: "周日",
    //           F3999: 2,
    //           F4000: 1,
    //           I100: 3,
    //           S6500: 1,
    //         },
    //       ],
    //     },
    //     xAxis: {
    //       type: "category",
    //       axisLabel: {
    //         color: "#eeeeee",
    //         fontSize: "1.2rem",
    //       },
    //     },
    //     yAxis: {
    //       splitLine: {
    //         show: false,
    //       },
    //       axisLabel: {
    //         color: "#eeeeee",
    //         fontSize: "1.2rem",
    //       },
    //     },
    //     // Declare several bar series, each will be mapped
    //     // to a column of dataset.source by default.
    //     series: [
    //       {
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: { color: "rgba(16,15,31,1)" },
    //         label: {
    //           show: true,
    //           fontSize: "0.8rem",
    //           position: "top",
    //         },
    //       },
    //       {
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: { color: "rgba(16,15,31,1)" },
    //         label: {
    //           show: true,
    //           fontSize: "0.8rem",
    //           position: "top",
    //         },
    //       },
    //       {
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: { color: "rgba(16,15,31,1)" },
    //         label: {
    //           show: true,
    //           fontSize: "0.8rem",
    //           position: "top",
    //         },
    //       },
    //       {
    //         type: "bar",
    //         showBackground: true,
    //         backgroundStyle: { color: "rgba(16,15,31,1)" },
    //         label: {
    //           show: true,
    //           fontSize: "0.8rem",
    //           position: "top",
    //         },
    //       },
    //     ],
    //   };
    //   option && myBarGroup.setOption(option);
    // },
  },
};
</script>

<style lang="less" scoped>
.faultBox {
  width: 100%;
  height: 101.5rem; //改代码需要自适应
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-direction: row;
  .baseBox {
    margin-right: 2rem;
  }
  .leftContent {
    flex: 2;
    margin-left: 2rem;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: column;
    .leftContentTop {
      flex: 1;
      background-color: #191931;
      border-radius: 1.4rem;
      margin-bottom: 1.4rem;
      border: 0.1rem solid #232341;
      padding: 0 2rem 2rem 2rem;

      .tableBox {
        width: 100%;
        height: 28rem;
        overflow: hidden;
      }
    }
    .leftContentBottom {
      flex: 1.7;
      background-color: #191931;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      .barChartBox {
        width: 100%;
        height: 31rem;
      }
    }
  }
  .centerContent {
    flex: 2.7;
    background-color: #191931;
    border-radius: 1.4rem;
    border: 0.1rem solid #232341;
    .dateBox {
      width: 100%;
      height: 36rem;
    }
    .barBoxTop5 {
      width: 100%;
      height: 30rem;
    }
    .lineMonthBox {
      width: 100%;
      height: 23rem;
      margin-top: 2rem;
    }
  }
  .rightContent {
    flex: 2;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-direction: column;
    .rightContentTop {
      flex: 1.7;
      background-color: #191931;
      margin-bottom: 1.4rem;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      .pieAreaBox {
        width: 100%;
        height: 40rem;
        background-color: aquamarine;
      }
      .barAreaBox {
        width: 100%;
        height: 50rem;
        // background-color: rgb(61, 78, 78);
      }
    }
    .rightContentBottom {
      flex: 1;
      background-color: #191931;
      border-radius: 1.4rem;
      border: 0.1rem solid #232341;
      .barGroupBox {
        width: 100%;
        height: 30.5rem;
      }
    }
  }
}
</style>
<style>
.el-table .cell {
  line-height: 2rem;
}
</style>